<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>el选项</title>
    <script src="../vue.js"></script>
</head>
<body>
<h2>【例1】el选项:定义vue组件唯一根元素</h2>
<hr>

<div id="app">
    姓名：{{name}}
    <h3>{{name}},您好</h3>
</div>
{{name}}
<mark>这里出错：name未在 el 根元素 之内</mark>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '贾瑞宁帅哥'
        }
    });
</script>

<div class="app1">
    书名：{{书名}}
    <h3>《{{书名}}》这本书不错</h3>
</div>

{{书名}}
<mark>这里出错：书名 未在 el 根元素 之内</mark>

<div class="app1">
    <h3>《{{书名}}》这本书我非常讨厌。</h3>
    <mark>这里出错：说明 el根元素是唯一根元素 只取到 .app1 类元素的第1个元素</mark>
</div>


<script>
    let vm1 = new Vue({
        el: '.app1',
        data: {
            书名: 'Vue.js前端开发实战'
        }
    });
</script>
<hr>
<p><a href="index.html">返回章节目录</a>
    <script>document.write(document.lastModified); </script>
</p>
</body>
</html>
